<template>
	<!--资料填报-->
	<div>
		<el-tabs
			v-model="activeName"
			type="card"
			class="demo-tabs"
			@tab-click="handleClick"
		>
			<el-main v-loading="isLoading" element-loading-text="加载中...">
				<el-tab-pane label="重大事项" name="1">
					<div class="d-flex a-center m-t20">
						<public-search
							:fields="fields"
							:search-param="form"
							@on-query="onQuery('1')"
							@on-reset="onReset('1')"
						/>
						<el-divider class="m-b10 m-l20 m-r20" direction="vertical" />
						<el-button
							size="large"
							class="button_view m-b10"
							@click="addHandle('1')"
							>新增</el-button
						>
					</div>
					<public-table
						:is-paging="false"
						:page="page"
						:table-option="tableOption"
						:table-data="issueList"
					>
						<template #buttons="scope">
							<el-button
								size="large"
								class="button_view m-b10"
								>查看</el-button
							>
						</template>
					</public-table>
				</el-tab-pane>
				<el-tab-pane label="子公司议题管理" name="2">
					<div class="d-flex a-center m-t20">
						<public-search
							:fields="fields2"
							:search-param="form2"
							@on-query="onQuery('2')"
							@on-reset="onReset('2')"
						/>
						<el-divider class="m-b10 m-l20 m-r20" direction="vertical" />
						<el-button
							size="large"
							class="button_view m-b10"
							@click="addHandle('2')"
							>新增</el-button
						>
					</div>
					<public-table
						:is-paging="false"
						:page="page2"
						:table-option="tableOption2"
						:table-data="reportMeetingList"
					>
						<template #buttons="scope">
							<el-button
								v-if="scope.row.examineStatus === 3"
								size="large"
								class="button_view m-b10"
								@click="onEdit(scope.row)"
								>编辑</el-button
							>
						</template>
					</public-table>
				</el-tab-pane>
			</el-main>
		</el-tabs>
	</div>

	<!--    重大事项  -->
	<public-form-popup
		ref="publicFormPopupRef"
		popup-type="add"
		:popup-params="{
			width: '30%',
			title: '重大事项',
			loadingText: '数据提交中...',
			confirmButtonTitle: '确认',
			labelWidth: 90,
		}"
		:form="addIssueForm"
		:fields="addIssueFields"
		:confirm-params="{
			fun: (form1, loading) => {
				loading.value = true;
				investmentDailyApi.addIssue(form1).then((res) => {
					if (res.code === '200') {
						loading.value = false;
						ElMessage.success('填报资料成功!');
						publicFormPopupRef.close();
						getIssueList({ ...form.value, projectId: getProjectId });
					} else {
						loading.value = false;
						ElMessage.error('填报资料失败!');
						publicFormPopupRef.close();
					}
				});
			},
		}"
	/>

	<!-- 新增经营财报会议   -->
	<public-form-popup
		ref="publicFormPopupRef2"
		popup-type="add"
		:popup-params="{
			width: '30%',
			title: '新增子公司议题',
			loadingText: '数据提交中...',
			confirmButtonTitle: '确认',
			labelWidth: 100,
		}"
		:fields="investMeetingFields"
		:form="investMeetingForm"
		:confirm-params="{
			fun: (form1, loading) => {
				let params = {
					projectId: getProjectId,
					meetingType: '1635420940115396428',
					id: form1.id !== undefined ? form1.id : '',
					meetingId: form1.meetingId !== undefined ? form1.meetingId : '',
					endMeetingTime: form1.endMeetingTime,
					meetingAddress: form1.meetingAddress,
					meetingContext: form1.meetingContext,
					meetingName: form1.meetingName,
					startMeetingTime: form1.startMeetingTime,
					type: form1.type,
					userIds: Array.isArray(form1.userIds)
						? form1.userIds.join(',')
						: form1.userIds,
					fileList: form1.fileList,
					nameOfSubsidiary: form1.nameOfSubsidiary,
				};
				let tempArr = [];
				if (Array.isArray(form1.userIds)) {
					investMeetingFields.map((item) => {
						if (item.key === 'userIds') {
							item.options.list.forEach((obj) => {
								form1.userIds.forEach((val) => {
									if (obj.userId === val) {
										tempArr.push(obj.userName);
									}
								});
							});
						}
					});
				}
				params.participants = tempArr.join(',');
				loading.value = true;
				investmentDailyApi.investMeeting(params).then((res) => {
					if (res.code === '200') {
						loading.value = false;
						ElMessage.success('新增经营财报成功!');
						publicFormPopupRef2.close();
						getReportMeetingList({ ...form2.value, projectId: getProjectId });
					} else {
						loading.value = false;
						ElMessage.error('新增经营财报失败!');
						publicFormPopupRef2.close();
					}
				});
			},
		}"
	>
		<template #userIds="data">
			<el-select
				class="m-l5"
				:style="{ width: data.data.width ? data.data.width + 'px' : '100%' }"
				:clearable="data.data.clearable || false"
				:disabled="data.data.disabled || false"
				:multiple="data.data.multiple || false"
				:collapse-tags="data.data.collapseTags || false"
				:filterable="data.data.filterable || false"
				v-model="investMeetingForm[data.data.key]"
				:placeholder="data.data.placeholder"
				@change="
					(e) => {
						if (data.data.fun) {
							data.data.fun(e);
						}
					}
				"
			>
				<el-option
					v-for="(subItem, sonIndex) in data.data.options.list"
					:key="sonIndex"
					:label="
						subItem[data.data.options.labelKey] +
						',' +
						subItem['departmentName']
					"
					:value="subItem[data.data.options.valueKey]"
				/>
			</el-select>
		</template>
		<template #fileList>
			<FileMinioUpload
				:restriction="true"
				:restrictionLimit="9"
				:businessType="37"
				:associationId="'1'"
				v-model:files="investMeetingForm.fileList"
			/>
		</template>
	</public-form-popup>

	<!-- 编辑经营财报会议   -->
	<public-form-popup
		ref="publicFormPopupRef3"
		popup-type="add"
		:popup-params="{
			width: '40%',
			title: '编辑经营财报会议',
			loadingText: '数据提交中...',
			confirmButtonTitle: '确认',
		}"
		:fields="investMeetingFields"
		:form="investMeetingForm2"
		:confirm-params="{
			fun: (form1, loading) => {
				let params = {
					id: investMeetingForm2.id !== undefined ? investMeetingForm2.id : '',
					meetingId:
						investMeetingForm2.meetingId !== undefined
							? investMeetingForm2.meetingId
							: '',
					endMeetingTime: investMeetingForm2.endMeetingTime,
					meetingAddress: investMeetingForm2.meetingAddress,
					meetingContext: investMeetingForm2.meetingContext,
					meetingName: investMeetingForm2.meetingName,
					meetingType: investMeetingForm2.meetingType,
					projectId: investMeetingForm2.projectId,
					startMeetingTime: investMeetingForm2.startMeetingTime,
					type: investMeetingForm2.type,
					userIds: Array.isArray(investMeetingForm2.userIds)
						? investMeetingForm2.userIds.join(',')
						: investMeetingForm2.userIds,
					nameOfSubsidiary: investMeetingForm2.nameOfSubsidiary,
				};
				let tempArr = [];
				if (Array.isArray(investMeetingForm2.userIds)) {
					investMeetingFields.map((item) => {
						if (item.key === 'userIds') {
							item.options.list.forEach((obj) => {
								investMeetingForm2.userIds.forEach((val) => {
									if (obj.userId === val) {
										tempArr.push(obj.userName);
									}
								});
							});
						}
					});
				}
				params.participants = tempArr.join(',');
				loading.value = true;
				investmentDailyApi.investMeeting(params).then((res) => {
					if (res.code === '200') {
						loading.value = false;
						ElMessage.success('编辑经营财报成功!');
						publicFormPopupRef3.close();
						getReportMeetingList({ ...form2, projectId: getProjectId });
					} else {
						loading.value = false;
						ElMessage.error('编辑经营财报失败!');
						publicFormPopupRef3.close();
					}
				});
			},
		}"
	>
		<template #userIds="data">
			<el-select
				class="m-l5"
				:style="{ width: data.data.width ? data.data.width + 'px' : '100%' }"
				:clearable="data.data.clearable || false"
				:disabled="data.data.disabled || false"
				:multiple="data.data.multiple || false"
				:collapse-tags="data.data.collapseTags || false"
				:filterable="data.data.filterable || false"
				v-model="investMeetingForm2[data.data.key]"
				:placeholder="data.data.placeholder"
				@change="
					(e) => {
						if (data.data.fun) {
							data.data.fun(e);
						}
					}
				"
			>
				<el-option
					v-for="(subItem, sonIndex) in data.data.options.list"
					:key="sonIndex"
					:label="
						subItem[data.data.options.labelKey] +
						',' +
						subItem['departmentName']
					"
					:value="subItem[data.data.options.valueKey]"
				/>
			</el-select>
		</template>
	</public-form-popup>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElTabs, ElDivider, ElMain, ElMessage } from "element-plus";
import { department, investmentDailyApi } from "@/api/investment";
import PublicSearch from "@/components/PublicSearch.vue";
import PublicTable from "@/components/PublicTable.vue";
import { resetForm } from "@/common/utils/GlobalUtils";
import PublicFormPopup from "@/components/publicFormPopup.vue";
import { useRouter } from "vue-router";
import FileMinioUpload from "@/components/FileMinioUpload.vue";

const router = useRouter();
const getProjectId = router.currentRoute.value.params.projectId;
const activeName = ref("1");
const page = reactive({
	total: 0,
	current: 1,
	size: 100,
});

const page2 = reactive({
	total: 0,
	current: 1,
	size: 100,
});
const tableOption = ref([
	{ label: "项目名称 ", prop: "projectName", minWidth: 100 },
	{ label: "事故名称 ", prop: "issueName", minWidth: 100 },
	{
		label: "重要程度 ",
		prop: "importance",
		formatter: (val) => {
			return ["", "低级", "一般", "高级", "超高级"][val];
    },
    minWidth: 100
	},
	{ label: "描述 ", prop: "description", minWidth: 100 },
	{ label: "填报人 ", prop: "createName", minWidth: 100 },
	{ label: "填报时间 ", prop: "createTime", minWidth: 120 },
	/*  {
        label: "操作",
        slot: true,
        overHidden: false,
        slotName: "buttons",
    },*/
]);

const tableOption2 = ref([
	{ label: "项目名称 ", prop: "projectName", minWidth: 100 },
	{ label: "会议名称 ", prop: "meetingName", minWidth: 100 },
	{ label: "会议时间 ", prop: "dateTime", minWidth: 150 },
	{ label: "所属部门 ", prop: "departmentName", minWidth: 100 },
	{ label: "参与人员 ", prop: "participants", minWidth: 100 },
	{ label: "会议内容 ", prop: "meetingContext", minWidth: 100 },
	{
		label: "操作",
		prop: "buttons",
		slot: true,
		width: 150,
	},
]);

const form = reactive({});

/**
 * 重大事项列表
 */
const issueList = ref([]);
const getIssueList = (params, callback, err_callback) => {
	investmentDailyApi.getIssueList(params).then((res) => {
		if (res.code === "200") {
			if (callback) callback(res);
			issueList.value = res.data;
		} else {
			if (err_callback) err_callback(res);
		}
	});
};

/**
 * 经营财报
 */
const reportMeetingList = ref([]);
const getReportMeetingList = (params, callback, err_callback) => {
	investmentDailyApi.getReportMeetingList(params).then((res) => {
		if (res.code === "200") {
			reportMeetingList.value = res.data;
			if (callback) callback(res);
		} else {
			if (err_callback) err_callback(res);
		}
	});
};

const isLoading = ref(false);
const handleClick = (tab, event) => {
	switch (tab.index) {
		case "0":
			isLoading.value = true;
			getIssueList(
				{
					projectId: getProjectId,
				},
				() => {
					isLoading.value = false;
				},
				() => {
					isLoading.value = false;
				}
			);
			break;
		case "1":
			isLoading.value = true;
			getReportMeetingList(
				{
					projectId: getProjectId,
				},
				() => {
					isLoading.value = false;
				},
				() => {
					isLoading.value = false;
				}
			);
			break;
	}
};

const fields = ref([
	{
		type: "datetimerange",
		label: "填报时间",
		key: "valueTime",
		startTimeName: "startTime",
		endTimeName: "endTime",
		placeholder: "请选择创建时间",
		clearable: true,
		fun: (e, params) => {
			if (e && e instanceof Array && e.length > 0) {
				form[params.startTimeName] = e[0];
				form[params.endTimeName] = e[1];
			}
			if (!e || (e instanceof Array && e.length === 0)) {
				form[params.startTimeName] = "";
				form[params.endTimeName] = "";
			}
		},
	},
	/*{   type:'input',
        label:'项目名称',
        key:'keyword',
        placeholder:'请输入项目名称/关键字搜索',
        clearable:true
    }*/
]);

const form2 = reactive({
	projectId: getProjectId,
});
const fields2 = ref([
	{
		type: "datetimerange",
		label: "填报时间",
		key: "valueTime",
		startTimeName: "startTime",
		endTimeName: "endTime",
		placeholder: "请选择创建时间",
		clearable: true,
		fun: (e, params) => {
			if (e && e instanceof Array && e.length > 0) {
				form2[params.startTimeName] = e[0];
				form2[params.endTimeName] = e[1];
			}
			if (!e || (e instanceof Array && e.length === 0)) {
				form2[params.startTimeName] = "";
				form2[params.endTimeName] = "";
			}
		},
	},
]);

/**
 * 查询
 */
const onQuery = (type) => {
	switch (type) {
		case "1":
			getIssueList({ ...form });
			break;
		case "2":
			getReportMeetingList({ ...form2 });
			break;
	}
};

/**
 * 重置
 */
const onReset = (type) => {
	switch (type) {
		case "1":
			getIssueList({
				projectId: getProjectId,
			});
			resetForm(form);
			break;
		case "2":
			getReportMeetingList({
				projectId: getProjectId,
			});
			resetForm(form2);
			break;
	}
};

const addIssueFields = ref([
	{
		label: "事故类型",
		type: "select",
		key: "issueType",
		width: 300,
		clearable: true,
		placeholder: "请选择事故类型",
		message: "请选择事故类型",
		event: "change",
		options: {
			labelKey: "label",
			valueKey: "value",
			list: [
				{
					label: "安全事故",
					value: "1",
				},
				{
					label: "重大事项",
					value: "2",
				},
				{
					label: "公共事件",
					value: "3",
				},
				{
					label: "经营风险",
					value: "4",
				},
			],
		},
	},
	{
		label: "事故名称",
		type: "input",
		key: "issueName",
		required: true,
		width: 300,
		placeholder: "请输入事故名称",
		message: "请输入事故名称",
		event: "blur",
	},
	{
		label: "重要程度",
		type: "select",
		key: "importance",
		width: 300,
		clearable: true,
		placeholder: "请选择重要程度",
		message: "请选择重要程度",
		event: "change",
		options: {
			labelKey: "label",
			valueKey: "value",
			list: [
				{
					label: "低级",
					value: "1",
				},
				{
					label: "一般",
					value: "2",
				},
				{
					label: "高级",
					value: "3",
				},
				{
					label: "超高级",
					value: "4",
				},
			],
		},
	},
	{
		label: "附件",
		type: "upload",
		key: "urlKey",
		width: 300,
		clearable: true,
		placeholder: "请上传附件",
		message: "请上传附件",
		event: "change",
		interfaceConfig: {
			fileName: "investment",
			apiPath: "fileApi.upload",
			param: {},
		},
	},
]);
const addIssueForm = ref({
	projectId: getProjectId,
});

const investMeetingForm2 = reactive({});
const investMeetingForm = reactive({
	meetingType: "1635420940115396428",
	projectId: getProjectId,
	startMeetingTime: "",
	endMeetingTime: "",
	fileList: [],
});
const investMeetingFields = ref([
	{
		label: "子公司名称",
		type: "input",
		key: "nameOfSubsidiary",
		required: true,
		placeholder: "请输入子公司名称",
		message: "请输入子公司名称",
		event: "blur",
	},
	{
		label: "会议名称",
		type: "input",
		key: "meetingName",
		required: true,
		placeholder: "请输入会议名称",
		message: "请输入会议名称",
		event: "blur",
	},
	{
		label: "参与人员",
		type: "slot",
		key: "userIds",
		clearable: true,
		multiple: true,
		collapseTags: true,
		filterable: true,
		placeholder: "请选择参与人员",
		message: "请选择参与人员",
		event: "change",
		options: {
			labelKey: "userName",
			valueKey: "userId",
			list: [],
		},
	},
	{
		label: "开会地址",
		type: "input",
		key: "meetingAddress",
		required: true,
		placeholder: "请输入开会地址",
		message: "请输入开会地址",
		event: "blur",
	},
	{
		label: "会议简述",
		type: "input",
		key: "meetingContext",
		required: true,
		placeholder: "请输入会议简述",
		message: "请输入会议简述",
		event: "blur",
	},
	{
		label: "会议时间",
		type: "datetimerange",
		key: "valueTime",
		message: "请选择会议时间",
		placeholder: "请选择会议时间",
		event: "change",
		fun: (e) => {
			if (!e) {
				investMeetingForm.startMeetingTime = "";
				investMeetingForm.endMeetingTime = "";
			}
			if (e) {
				investMeetingForm.startMeetingTime = e[0];
				investMeetingForm.endMeetingTime = e[1];
			}
		},
	},
	{
		label: "会议性质",
		type: "select",
		key: "type",
		clearable: true,
		placeholder: "请选择会议性质",
		message: "请选择会议性质",
		event: "change",
		options: {
			labelKey: "label",
			valueKey: "value",
			list: [
				{
					label: "股东会议",
					value: "-279282233060603739",
				},
				{
					label: "董事会议",
					value: "2288022167746857581",
				},
			],
		},
	},
	{
		label: "附件上传",
		type: "slot",
		key: "fileList",
		placeholder: "请选择会议性质",
		message: "请选择会议性质",
	},
]);

/**
 * 新增时的弹窗
 * @param type
 */
const title = ref("经营财报");
const publicFormPopupRef = ref(null);
const publicFormPopupRef2 = ref(null);
const addHandle = (type) => {
	switch (type) {
		case "1":
			publicFormPopupRef.value.open();
			break;
		case "2":
			title.value = "新增子公司议题";
			resetForm(investMeetingForm);
			investMeetingForm.valueTime = [];
			publicFormPopupRef2.value.open();
			break;
	}
};

/**
 * 查询用户列表
 */
const getUserList = () => {
	department.getUserList().then((res) => {
		if (res.code === "200") {
			investMeetingFields.value.map((item) => {
				if (item.key === "userIds") {
					item.options.list.push(...res.data);
				}
			});
		}
	});
};

/**
 * 编辑
 */
const publicFormPopupRef3 = ref(null);
const onEdit = (row) => {
	title.value = "编辑经营财报";
	investmentDailyApi.getProjectInvestmentDaily(row.meetingId).then((res) => {
		if (res.code === "200") {
			for (let key in res.data) {
				if (key === "userIds") {
					investMeetingForm2[key] =
						res.data[key] === "" ? [] : res.data[key].split(",");
				} else if (key === "startMeetingTime") {
					investMeetingForm2[key] = res.data[key];
					investMeetingForm2["valueTime"] = [
						res.data["startMeetingTime"],
						res.data["endMeetingTime"],
					];
				} else {
					investMeetingForm2[key] = res.data[key];
				}
			}
			// console.log("investMeetingForm.value", investMeetingForm2);
			publicFormPopupRef3.value.open();
		}
	});
};

onMounted(() => {
	getIssueList({
		projectId: getProjectId,
	});
	getUserList();
});
</script>

<style scoped></style>
